<template>
    <main class="main" id="top">
        <navBar></navBar>
        <div class="bg-dark"><img class="img-fluid position-absolute end-0" :src="heroBg" alt="" />


            <!-- ============================================-->
            <!-- <section> begin ============================-->
            <section>

                <div class="container">
                    <div class=" row align-items-center py-lg-8 py-6">
                        <div class="col-lg-6 text-center text-lg-start">
                            <h1 style="font-family: 'Noto Sans SC';" class="text-white fs-5 fs-xl-5">智能数据采集与自动控制系统</h1>
                            <p class="text-white py-lg-3 py-2">多参数同步采集&emsp;实时数据分析&emsp;自动控制系统&emsp;云端数据存储</p>
                            <div class="d-sm-flex align-items-center gap-3">
                                <button @click="() => {
                                    router.push({
                                        name: 'form'
                                    })
                                }" class="btn btn-success text-black mb-3 w-50" id="rightNowBtn1">立即体验</button>
                            </div>
                        </div>
                        <div class="col-lg-6 text-center text-lg-end mt-3 mt-lg-0"><img class="img-fluid"
                                :src="heroGraphics" alt="" /></div>
                    </div>
                </div>
                <!-- end of .container-->

            </section>
            <!-- <section> close ============================-->
        </div>

        <!-- ============================================-->
        <!-- <section> begin ============================-->
        <section>

            <div class="container" id="device">
                <h1 class="text-center ">我们的产品服务</h1>
                <p class="mx-auto text-center fs-3 w-lg-85">提供专业可靠的实验系统和全面的数据支持</p>
                <div class="row gx-xl-7 mt-5">
                    <div class="col-md-4 mb-6 mb-md-0 text-center text-md-start">
                        <img class="w-50 w-md-100" style="height: 374px;border-radius: 7%;" :src="IMGElect" alt="" />
                        <h4 class="mt-3 my-1">高可靠主机</h4>
                        <p class="fs-0 mb-2 mt-2" style="height: 100px;text-align:justify;line-height:1.6em;">
                            专业工控主机，经过大规模市场验证<br>特别裁剪的操作系统，确保流畅运行<br>开箱即用，享受服务期内持续升级支持
                        </p><a
                            class="text-dark fs-1 pb-2 fw-bold border-black border-bottom text-decoration-none desc-link"
                            href="#">详情介绍
                            <i class="fa-solid fa-arrow-right ms-2"></i></a>
                    </div>
                    <div class="col-md-4 mb-6 mb-md-0 text-center text-md-start"><img class="w-50 w-md-100"
                            :src="IMGHost" style="height: 374px;border-radius: 7%;" alt="" />
                        <h4 class="mt-3 my-1">电控箱</h4>
                        <p class="fs-0 mb-2 mt-2" style="height: 100px;text-align:justify;line-height:1.6em;">
                            告别杂乱接线，维护更轻松<br>整合常规设备接口，即插即用<br>提升实验安全性
                        </p><a
                            class="text-dark fs-1 pb-2 fw-bold border-black border-bottom text-decoration-none desc-link"
                            href="#">详情介绍
                            <i class="fa-solid fa-arrow-right ms-2"></i></a>
                    </div>
                    <div class="col-md-4 mb-6 mb-md-0 text-center text-md-start"><img class="w-50 w-md-100" :src="IMG2"
                            style="height: 374px;border-radius: 7%;" alt="" />
                        <h4 class="mt-3 my-1">可选增值服务</h4>
                        <p class="fs-0 mb-2 mt-2" style="height: 100px;text-align:justify">
                            精准仪表与设备选型，兼顾性能与成本<br>量身定制功能全面的测控系统<br>提供系统集成、现场支持与专业培训
                        </p><a
                            class="text-dark fs-1 pb-2 fw-bold border-black border-bottom text-decoration-none desc-link"
                            href="#">详情介绍
                            <i class="fa-solid fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <!-- end of .container-->

        </section>
        <!-- <section> close ============================-->
        <!-- ============================================-->




        <!-- ============================================-->
        <!-- <section> begin ============================-->
        <section>

            <div class="container" style="margin-bottom: 50px;">
                <div class="row align-items-center">
                    <div class="col-lg-6 text-center text-lg-start"><img class=" img-fluid" :src="IMGScenc" alt="" />
                    </div>
                    <div class="col-lg-6">
                        <h1 style="margin-left: 12px;">我们的应用场景</h1>
                        <ul class="list-unstyled my-xl-5 my-3">
                            <li class="fs-2 my-4 d-flex align-items-center gap-3 text-black"><i
                                    class="fa-solid fa-circle-check fs-4 text-dark"></i><span>工业过程监测监控：可靠、低成本、高效！</span>
                            </li>
                            <li class="fs-2 my-4 d-flex align-items-center gap-3 text-black"><i
                                    class="fa-solid fa-circle-check fs-4 text-dark"></i><span>科研实验室：提高实验效率，增强研究能力！</span>
                            </li>
                            <li class="fs-2 my-4 d-flex align-items-center gap-3 text-black"><i
                                    class="fa-solid fa-circle-check fs-4 text-dark"></i><span>中小学科学课堂：激发学生兴趣，提升教学质量！</span>
                            </li>
                        </ul>
                        <button class="btn btn-dark" id="rightNowBtn2" @click="() => {
                            router.push({
                                name: 'form'
                            })
                        }">立即体验</button>
                    </div>
                </div>
            </div>
            <!-- end of .container-->

        </section>
        <!-- <section> close ============================-->
        <!-- ============================================-->


        <!-- ============================================-->
        <!-- <section> begin ============================-->
        <section class="bg-dark pt-6" style="padding-bottom: 8rem;">

            <div class="container">
                <div class="col-md-6">
                    <h1 class="text-white" style="height: 100px;">我们的优势</h1>
                </div>
                <div class="mt-3 d-flex flex-between-center">
                    <div class="p-5 h-auto">
                        <div class="d-flex flex-column justify-content-start h-100">
                            <div class="d-flex flex-align-center">
                                <svg class="icon" aria-hidden="true" style="font-size: 3rem;margin-right: 1rem;">
                                    <use xlink:href="#icon-jiandanjiansuo"></use>
                                </svg>
                                <h1 style="display: inline-block;color: #75cd9a;">简单</h1>
                            </div>

                            <p class="fs-2 mb-2 mt-2" style="text-align:justify;color: #86d4a7;">
                                无需编程，轻松实现无代码接入
                            </p>
                        </div>
                    </div>
                    <div class="p-5 h-auto">
                        <div class="d-flex flex-column justify-content-start h-100">
                            <div class="d-flex flex-align-center">
                                <svg class="icon" aria-hidden="true" style="font-size: 3rem;margin-right: 1rem;">
                                    <use xlink:href="#icon-bushulinghuo"></use>
                                </svg>
                                <h1 style="display: inline-block;color: #42BCD7;">灵活</h1>
                            </div>

                            <p class="fs-2 mb-2 mt-2" style="text-align:justify;color: #55c3db;">
                                软件核心功能免费更新，保持领先
                            </p>
                        </div>
                    </div>
                    <div class="p-5 h-auto">
                        <div class="d-flex flex-column justify-content-start h-100">
                            <div class="d-flex flex-align-center">
                                <svg class="icon" aria-hidden="true" style="font-size: 3rem;margin-right: 1rem;">
                                    <use xlink:href="#icon-kekuozhanxing"></use>
                                </svg>
                                <h1 style="display: inline-block;color: #e7d8fc;">可扩展</h1>
                            </div>

                            <p class="fs-2 mb-2 mt-2" style="text-align:justify;color: #e7d8fc;">
                                支持市场驱动，轻松添加新设备
                            </p>
                        </div>
                    </div>
                    <!-- 
                <div class="swiper-button-next"><span class="fas fa-arrow-right fs-lg-3 fs-2"></span></div>
                <div class="swiper-button-prev"><span class="fas fa-arrow-left fs-lg-3 fs-2"></span></div> -->
                </div>
            </div>
            <!-- end of .container-->

        </section>


        <!-- ============================================-->
        <!-- <section> begin ============================-->
        <section>

            <div class="container">
                <div class="row  align-items-center">
                    <div class="col-md-6">
                        <h1 style="height: 100px">测控变得如此简单
                        </h1>
                    </div>
                </div>
                <div class=" mt-3 d-flex flex-between-center"
                    style="justify-content: space-around;align-items: flex-start;">
                    <div class="p-4 h-auto" style="width: 33%;">
                        <div class="d-flex flex-column justify-content-start h-100 align-items-center">
                            <div class="d-flex flex-column flex-align-center">
                                <div style="background-color: #0A2640;border-radius: 50%;padding: 15px;">
                                    <svg class="icon" aria-hidden="true"
                                        style="font-size: 5rem;padding: 8px;color: aliceblue;">
                                        <use xlink:href="#icon-diannao"></use>
                                    </svg>
                                </div>
                                <h2 class="mt-2">轻松设备接入</h2>
                            </div>

                            <p class="fs-0 mb-2 mt-2" style="text-align:center;">
                                支持各种传感器、变送器和智能设备的无代码接入，通过简单的点击操作即可完成设备的集成
                            </p>
                        </div>
                    </div>
                    <div class="p-4 h-auto" style="width: 33%;">
                        <div class="d-flex flex-column justify-content-start h-100 align-items-center">
                            <div class="d-flex flex-column flex-align-center">
                                <div style="background-color: #0A2640;border-radius: 50%;padding: 15px;">
                                    <svg class="icon" aria-hidden="true" style="font-size: 5rem;color: #0dcaf0;">
                                        <use xlink:href="#icon-shezhi2"></use>
                                    </svg>
                                </div>
                                <h2 class="mt-2">实验配置与管理</h2>
                            </div>

                            <p class="fs-0 mb-2 mt-2" style="text-align:center;">
                                提供用户友好的界面，通过少量配置快速设置和启动实验，包含自动化数据采集和管理功能
                            </p>
                        </div>
                    </div>
                    <div class="p-4 h-auto" style="width: 33%;">
                        <div class="d-flex flex-column justify-content-start h-100 align-items-center">
                            <div class="d-flex flex-column flex-align-center">
                                <div style="background-color: #0A2640;border-radius: 50%;padding: 15px;">
                                    <svg class="icon" aria-hidden="true" style="font-size: 5rem;color: #20c997;">
                                        <use xlink:href="#icon-shiyan"></use>
                                    </svg>
                                </div>
                                <h2 class="mt-2">开始实验</h2>
                            </div>
                            <p class="fs-0 mb-2 mt-2" style="text-align:center;">
                                一切就绪，开启你的实验探索之旅吧
                            </p>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end of .container-->

        </section>

        <!-- ============================================-->
        <!-- <section> begin ============================-->
        <!-- <section>

            <div class="container bg-dark overflow-hidden rounded-1">
                <div class="bg-holder" :style="{ 'background-image': `url(${PromoBg})` }">
                </div>


                <div class="px-5 py-7 position-relative">
                   
                    <div class="row justify-content-center ">
                        <div class="col-auto mt-2 mt-lg-0">
                            <button class="btn btn-success text-dark fs-1 px-sm-10">联系我们</button>
                        </div>
                    </div>
                </div>
            </div>


        </section> -->
        <!-- <section> close ============================-->
        <!-- ============================================-->
    </main>
    <footBar></footBar>
</template>

<script setup>
import heroBg from '@/assets/img/hero/hero-bg.png'
import heroGraphics from '@/assets/img/hero/hero-graphics.png'
import IMG4024 from '@/assets/img/device/4024.svg'
import IMG4118 from '@/assets/img/device/4118.svg'
import IMG4150 from '@/assets/img/device/4150.svg'
import IMGValve from '@/assets/img/device/电动阀.svg'
import IMGTemp from '@/assets/img/device/热电偶.svg'
import IMGPress from '@/assets/img/device/压力传感器.svg'
import IMGSwitch from '@/assets/img/device/接近开关.svg'
import IMGHost from '@/assets/img/product/主机.png'
import IMGElect from '@/assets/img/product/电控箱.png'
import IMG2 from '@/assets/img/services/2.png'
import IMGScenc from '@/assets/img/product/场景.png'
import IMG3 from '@/assets/img/offer/3.png'
import PromoBg from '@/assets/img/promo/promo-bg.png'


import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

import navBar from '@/components/navBar/navBar.vue'
import footBar from '@/components/footBar/footBar.vue'
import { onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from "vue-router"


const router = useRouter()
const route = useRoute()


import { EventBus } from '@/utils/eventBus1.js';


onMounted(() => {
    console.log('route', route.query)
    if (route.query.scrollTo === '#device') {
        setTimeout(() => {
            scrollToAnchor('#device');
        }, 100); // 延时100ms，视具体情况调整
    }
});

const scrollToAnchor = (selector) => {
    const element = document.querySelector(selector);
    if (element) {
        console.log('scrollToAnchor')
        element.scrollIntoView({ behavior: 'smooth' });
    }
}

watch(() => EventBus.scrollTo, (newVal) => {
    if (newVal) {
        scrollToAnchor(newVal);
        EventBus.scrollTo = null; // 重置事件总线的值
    }
});
onUnmounted(() => {
    // 清理事件总线上的监听器
    EventBus.scrollTo = null;
});

</script>

<style scoped>
#rightNowBtn1:hover {
    background-color: #81e8b3;
    border-color: #81e8b3;
    color: #0A2640;
}



#rightNowBtn2:hover {
    background-color: #74d1a1;
    border-color: #74d1a1;
    transition: all 0.3s;
}

.desc-link:hover {
    color: #74d1a1 !important;
    border-color: #74d1a1 !important;
    transition: all 0.3s;
}


.btn:active {
    transform: scale(0.95);
    transition: all 0.2s;
}

.btn:focus {
    outline: none;
}
</style>